<template>
 	<div class='projectListContainer'>
 		<div class='projectList' v-if="projectList.length != 0">
 			<ProjectItem v-for="(item, i) in projectList" :key="item.id" :projectItem="item" 
 				@click="$emit('projectItemClick', item)" :getCollectedList='props.getCollectedList'>
 				<template #titleRight>
 					<span :style="{ color: item.recruitStatus == 0 ? '#8466F5' : '#B5ACCE', fontWeight: 500 }">
 						{{item.recruitStatus==0?t('control','未招满'):t('control','已招满')}}
 					</span>
 				</template>
 				<template #job>
 					<div v-if="item.jobData&&item.jobData.length!=0" style='line-height: 20px;'>
 						<span>{{ t('projectDetail','招聘信息') }}: </span>
 						<span v-for="(jobItem) in item.jobData">
 							{{jobItem.jobName}}
 							<span :style="{ color: jobItem.recruitsNumber < jobItem.number ? 'deeppink' : 'black' }">
 								{{jobItem.number}}{{ t('projectPositions','人') }}
 							</span>
 						</span>
 					</div>
 				</template>
 			</ProjectItem>
			 <div style="width: 270px" v-for="item in (5 - projectList.length%4)"></div>

 		</div>
 		<div class='paginationBox' v-if="projectList.length != 0">
 			<a-pagination v-model:current="pageData.current" v-model:pageSize="pageData.pageSize" 
			 show-size-changer :hideOnSinglePage='false' :total="pageData.total" @change="(page,pageSize)=>$emit('paginationChange', page,pageSize)"/>
 		</div>
 		<div class='projectList flexCenter' v-if='projectList.length == 0'>
 			<a-empty>
 				<template #description>
 					<span style="color: #A3A6AD">
						{{t('common', '项目为空')}}
 					</span>
 				</template>
 			</a-empty>
 		</div>
 	</div>
 </template>

 <script setup>
 	import {
 		defineProps,
 		defineEmits,ref,reactive,watch,onMounted
 	} from 'vue';
 	import ProjectItem from '@/components/ProjectItem.vue';
 	import {
 		useRouter,
 		useRoute
 	} from 'vue-router';
	import { t } from '@/i18n'
 	const props = defineProps({
 		projectList: Array,
		pageData:Object,
		getCollectedList:Function,
 	});

 	const router = useRouter();
 	const emit = defineEmits(['projectItemClick','paginationChange']);

 	let {
 		pageData,projectList
 	} = props;
	
	projectList=reactive(projectList)
	watch(projectList,newVal=>{
		console.log('列表',newVal)
		projectList.splice(0, projectList.length, ...newVal);
	})


 
 </script>

 <style lang="scss" scoped>
 	@import '@/styles/public.scss';

 	.projectListContainer {
 		height: 100%;
 		width: 100%;
		overflow-x: unset;
		display: flex;
		flex-direction: column;
		@include hoverShowScrollBar();
		
		

		 .projectList {
			min-height: 0;
			overflow: auto;
			flex-grow: 1;
			width: 100%;
			padding: 0 0 20px 0;
			display: grid;
			grid-template-columns: repeat(5, 1fr); /* 创建4列 */
			grid-template-rows: auto auto; /* 创建2行 */
			grid-gap: 15px; /* 根据需要调整间距 */
		}
		
 		.paginationBox {
 			width: 100%;
			padding: 15px 0;
			margin-top: auto; 
 			@include FlexCenterAndCenter();
 		}

 		.flexCenter {
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			height: 100%;
 			padding-bottom: 100px;
 		}
 	}
 </style>

 
 
 
 
 
 
 
